<template>
	<div class="app-container2"
	>
		<el-form
			ref="ruleForm"
			class="ruleForm"
			:model="ruleForm"
			label-width="100px"
			:inline="true"
		>
			<el-form-item label="发起党组织:">
				<el-select v-model="value" placeholder="请选择">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="活动时间:">
				<el-date-picker
					v-model="value"
					type="daterange"
					range-separator="~"
					start-placeholder="时间起"
					end-placeholder="时间止"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="状态:">
				<el-select v-model="value" placeholder="请选择">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div class="tableListOperator">
			<div class="leftBtns">
				<el-button
					type="primary"
					icon="el-icon-plus"
					size="small"
					@click="add"
					>新增</el-button
				>
			</div>
			<div class="rightBtns">
				<el-button @click="submit" size="small">重置</el-button>
				<el-button type="primary" size="small">查询</el-button>
			</div>
		</div>
		<el-table :data="list" style="width: 100%" v-loading="loading">
			<el-table-column prop="title" label="主题" align="center">
			</el-table-column>
			<el-table-column prop="unit" label="所属组织" align="center">
			</el-table-column>
			<el-table-column prop="starttime" label="开始时间" align="center">
			</el-table-column>
			<el-table-column prop="endtime" label="结束时间" align="center">
			</el-table-column>
			<el-table-column prop="status" label="状态" align="center">
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="{ row }">
					<div >
						<el-button type="text" @click="zhibupingding(row)"
							>支部评定</el-button
						>
						<el-button type="text" @click="pingdingjieguo(row)"
							>评定结果</el-button
						>
						<el-button type="text" @click="del(row)"
							>删除</el-button
						>
					</div>
				</template>
			</el-table-column>
		</el-table>
    <pagination
      v-show="ruleForm.total>0"
      :total="ruleForm.total"
      :page.sync="ruleForm.pageNum"
      :limit.sync="ruleForm.pageSize"
      @pagination="()=>{}"
    />
		<!-- 新增民主评议 -->
		<el-dialog title="民主评议新增" :visible.sync="adddialog" width="800px">
			<el-form
				:model="addform"
				:rules="addrules"
				ref="addForm"
				label-width="100px"
			>
				<el-form-item label="发起组织" prop="name">
					<el-select v-model="addform.value" placeholder="请选择">
						<el-option
							v-for="item in 3"
							:key="item"
							:label="item"
							:value="item"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="民主评议主题" prop="title">
					<el-input v-model="addform.title" placeholder="请输入" />
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="开始时间" prop="starttime">
							<el-date-picker
								v-model="addform.starttime"
								type="date"
								placeholder="请选择日期"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="结束时间" prop="endtime">
							<el-date-picker
								v-model="addform.endtime"
								type="date"
								placeholder="请选择日期"
							/> </el-form-item
					></el-col>
				</el-row>
				<span style="color: #ff4d4f; padding-left: 100px"
					>活动时间是党员自评及互评的时间，活动结束后请开展支部评定</span
				>
				<el-form-item label="自评截止时间" prop="finishtime">
					<el-date-picker
						v-model="addform.finishtime"
						type="date"
						placeholder="请选择日期"
					/>
				</el-form-item>
				<el-form-item label="评议说明" prop="remark">
					<el-input
						v-model="addform.remark"
						type="textarea"
						placeholder="请输入评议说明"
					/>
				</el-form-item>
				<el-form-item label="民主评议对象" prop="obj">
					<div class="objs">
						<div
							class="obj"
							v-for="(item, index) in 30"
							:key="index"
							@click="delObj(item, index)"
						>
							<el-avatar src=""></el-avatar>
							<span>姓名</span>
						</div>
						<div class="obj" @click="addObj">
							<i class="el-icon-circle-plus-outline add-obj"></i>
							<span>添加人员</span>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="听取群众意见" prop="radio">
					<el-radio-group v-model="addform.radio">
						<el-radio :label="1">是</el-radio>
						<el-radio :label="-1">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="附件" prop="file">
					<el-upload action>
						<el-button>上传附件</el-button>
						<div slot="tip">
							支持扩展名：.doc .docx .pdf 大小200M以内
						</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="adddialog = false">取 消</el-button>
				<el-button type="primary" @click="adddialog = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<!-- 新增民主评议时，人员选择 -->
		<el-dialog title="人员选择" :visible.sync="selectdialog" width="800px">
			<el-row>
				<el-col
					:span="11"
					style="border-right: solid 1px #eee; padding-left: 30px"
				>
					<el-tag
						v-for="tag in 13"
						:key="tag"
						type="info"
						closable
						style="margin-right: 5px; margin-bottom: 5px"
					>
						姓名{{ tag }}
					</el-tag>
					<el-autocomplete
						v-model="addform.persons"
						:fetch-suggestions="querySearch"
						placeholder="人员搜索"
						:trigger-on-focus="false"
						@select="handleSelect"
				/></el-col>
				<el-col
					:span="11"
					style="border-left: solid 1px #eee; padding-left: 30px"
				>
					<div class="units">
						<span>中共兴平市党委</span>
						<span>中共兴平市西城街道党委</span>
						<span>中共兴平市西城街道党委</span>
						<span>中共兴平市西城街道党委</span>
					</div>
					<div style="margin: 15px 0"></div>
					<el-checkbox v-model="checkAll" @change="checkAllChange"
						>全选</el-checkbox
					>
					<div style="margin: 15px 0"></div>
					<!-- <el-checkbox-group
						v-model="units"
						@change="checkedChange"
						class="unitboxgroup"
					>
						<el-checkbox
							v-for="city in 10"
							:label="city"
							:key="city"
							style="display: block; padding: 5px 0"
						>
							<div class="unitbox">
								<span>{{ city }}</span>
								<span class="btn" @click.stop="getChildren"
									>下级</span
								>
							</div>
						</el-checkbox>
					</el-checkbox-group> -->
					<el-tree
						:data="treedata"
						show-checkbox
						node-key="id"
						default-expand-all
						:expand-on-click-node="false"
						ref="tree"
						@check-change="checkedChange"
					>
						<span
							class="custom-tree-node"
							slot-scope="{ node, data }"
						>
							<span>{{ node.label }}</span>
							<span class="btn">
								<el-divider direction="vertical"></el-divider>
								<el-button
									type="text"
									size="mini"
									@click="() => getChildren(data)"
								>
									下级
								</el-button>
							</span>
						</span>
					</el-tree>
				</el-col>
			</el-row>
		</el-dialog>
		<!-- 支部评定 -->
		<el-dialog
			title="支部评定详情"
			:visible.sync="zhibupingdingxiangqing"
			width="1200px"
		>
			<el-row>
				<el-col :span="10"
					><el-form label-width="80px">
						<el-form-item label="组织名称">
							<el-cascader
								:options="[]"
								:props="{ checkStrictly: true }"
								clearable
							></el-cascader>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col
					:span="4"
					:offset="8"
					style="display: flex; justify-content: space-around"
				>
					<el-button>重置</el-button>
					<el-button type="primary">查询</el-button>
				</el-col>
			</el-row>
			<el-table :data="[{}]">
				<el-table-column label="姓名"></el-table-column>
				<el-table-column label="所属组织"></el-table-column>
				<el-table-column label="自评结果"></el-table-column>
				<el-table-column label="互评情况" align="center">
					<el-table-column label="优秀"></el-table-column>
					<el-table-column label="合格"></el-table-column>
					<el-table-column label="基本合格"></el-table-column>
					<el-table-column label="不合格"></el-table-column>
					<el-table-column label="不定等次"></el-table-column>
					<el-table-column label="不了解"></el-table-column>
				</el-table-column>
				<el-table-column label="操作" width="240px">
					<template slot-scope="{ row }">
						<el-button type="text" @click="chakanziping"
							>查看自评</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="chakanhuping"
							>查看互评</el-button
						>
						<el-divider direction="vertical"></el-divider>
						<el-button type="text" @click="zuzhipingding"
							>组织评定</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 查看自评 -->

		<el-dialog
			title="查看自评"
			:visible.sync="chakanzipingdialog"
			width="800px"
		>
			<el-descriptions title="" :column="2">
				<el-descriptions-item label="姓名">张三</el-descriptions-item>
				<el-descriptions-item label="性别">男</el-descriptions-item>
				<el-descriptions-item label="所属组织"
					>中共*********党委</el-descriptions-item
				>
				<el-descriptions-item label="自评结果"> </el-descriptions-item>
				<el-descriptions-item label="自评内容"></el-descriptions-item>
			</el-descriptions>
		</el-dialog>
		<!-- 查看互评 -->

		<el-dialog
			title="查看互评"
			:visible.sync="chakanhupingdialog"
			width="800px"
		>
			<el-table :data="[{}]">
				<el-table-column label="姓名"></el-table-column>
				<el-table-column label="所属组织"></el-table-column>
				<el-table-column label="性别"></el-table-column>
				<el-table-column label="评价"></el-table-column>
				<el-table-column label="备注"></el-table-column>
			</el-table>
		</el-dialog>
		<!-- 组织评定 -->

		<el-dialog
			title="民主评议支部评定"
			:visible.sync="zuzhipingdingdialog"
			width="800px"
		>
			<el-form label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="评定结果">
							<el-select>
								<el-option></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="评议奖惩情况">
							<el-select>
								<el-option></el-option> </el-select></el-form-item
					></el-col>
				</el-row>
				<el-form-item label="评议奖惩原因">
					<el-input
						type="textarea"
						placeholder="请输入评议奖惩原因"
					></el-input>
				</el-form-item>
				<el-form-item label="评议说明">
					<el-input
						type="textarea"
						placeholder="请输入评议说明"
					></el-input
				></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="zuzhipingdingdialog = false"
					>取 消</el-button
				>
				<el-button type="primary">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 评定结果 -->
		<el-dialog
			title="支部评定结果"
			:visible.sync="pingdingjieguodialog"
			width="1200px"
		>
			<el-card header="评定结果">
				<el-row>
					<el-col :span="4">优秀：0人</el-col>
					<el-col :span="4">合格：0人</el-col>
					<el-col :span="4">基本合格：0人</el-col>
					<el-col :span="4">不合格：0人</el-col>
					<el-col :span="4">不定等次：0人</el-col>
				</el-row>
			</el-card>
			<el-table :data="[{}]" style="margin-top: 20px">
				<el-table-column label="姓名"> </el-table-column>
				<el-table-column label="所属组织"> </el-table-column>
				<el-table-column label="支部评定结果"> </el-table-column>
				<el-table-column label="自评结果"> </el-table-column>
				<el-table-column label="互评情况" align="center">
					<el-table-column label="优秀"> </el-table-column>
					<el-table-column label="合格"> </el-table-column>
					<el-table-column label="基本合格"> </el-table-column>
					<el-table-column label="不合格"> </el-table-column>
					<el-table-column label="不定等次"> </el-table-column>
					<el-table-column label="不了解"> </el-table-column>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
// import { } from "@/api/card/home";
export default {
	data() {
		return {
			loading: false,
			value: '',
			adddialog: false,
			list: [],
			ruleForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				type: [],
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入活动名称',
						trigger: 'blur',
					},
				],
			},
			options: [],
			addform: {},
			addrules: {},
			selectdialog: false,
			checkAll: false,
			units: [],
			checkedNodes: [],
			treedata: [
				{
					id: 1,
					label: '一级1',
				},
				{
					id: 2,
					label: '一级2',
				},
				{
					id: 3,
					label: '一级3',
				},
			],
			zhibupingdingxiangqing: false,
			pingdingjieguodialog: false,
			chakanzipingdialog: false,
			chakanhupingdialog: false,
			zuzhipingdingdialog: false,
		}
	},
	methods: {
		getList() {
			this.list = [
				{
					title: '主体',
					unit: '所属组织',
					starttime: '开始时间',
					endtime: '结束时间',
					status: '状态',
				},
			]
		},
		submit() {},
		//切换分页
		handleCurrentChange(val) {
			this.loading = true
			this.ruleForm.pageNum = val
		},
		//切换总条数
		handleSizeChange(val) {
			this.loading = true
			this.ruleForm.pageSize = val
		},
		add() {
			this.adddialog = true
		},
		del(row) {
			this.$confirm(`确定删除吗？`, '删除民主评议', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {})
				.catch((err) => {})
		},
		delObj(item, index) {},
		addObj() {
			this.selectdialog = true
		},
		querySearch(str, cb) {},
		handleSelect() {},
		checkAllChange() {
			if (this.checkAll) {
				this.$refs.tree.setCheckedKeys(
					this.treedata.map((item) => item.id)
				)
			} else {
				this.$refs.tree.setCheckedKeys([])
			}
		},
		checkedChange(node, checked, c) {
			if (checked) {
				this.checkedNodes.push(node.id)
			} else {
				this.checkedNodes.splice(this.checkedNodes.indexOf(node.id), 1)
			}
			if (this.checkedNodes.length == this.treedata.length) {
				this.checkAll = true
			} else {
				this.checkAll = false
			}
		},
		getChildren() {
			console.log(1)
		},
		zhibupingding(row) {
			console.log(row)
			this.zhibupingdingxiangqing = true
		},
		pingdingjieguo(row) {
			this.pingdingjieguodialog = true
		},
		chakanziping() {
			this.chakanzipingdialog = true
		},
		chakanhuping() {
			this.chakanhupingdialog = true
		},
		zuzhipingding() {
			this.zuzhipingdingdialog = true
		},
	},
	created() {
		this.getList()
	},
}
</script>

<style lang="scss" scoped>
.ruleForm {
	margin-bottom: 14px;
	::v-deep .el-form-item {
		width: 32.5%;
		margin-right: 0;
		margin-bottom: 10px;
	}
	::v-deep .el-form-item__content {
		width: calc(100% - 100px);
		.el-select {
			width: 100%;
		}
	}
}
.objs {
	display: flex;
	flex-wrap: wrap;
	.obj {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px 10px;
		.add-obj {
			font-size: 44px;
		}
	}
}
.units {
	display: flex;
	flex-wrap: wrap;
	span {
		padding: 0 10px;
		margin: 5px 0;
		border-left: solid 1px #eee;
		cursor: pointer;
		&:hover {
			color: #ff4d4f;
		}
		&:first-child {
			border: none;
		}
	}
}
// .unitboxgroup {
// 	::v-deep .el-checkbox {
// 		margin-right: 0;
// 		.el-checkbox__label {
// 			display: inline-block;
// 			width: 100% !important;
// 		}
// 	}
// }
// .unitbox {
// 	width: 100%;
// 	display: flex;
// 	justify-content: space-between;
// 	.btn {
// 		padding-left: 25px;
// 		border-left: solid 1px #ccc;
// 	}
// }
.el-tree {
	::v-deep .el-tree-node {
		margin: 13px 0;
	}
	::v-deep .is-leaf {
		display: none !important;
	}
	.custom-tree-node {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 3px 0;
		::v-deep .el-button {
			color: #666;
		}
	}
}
</style>
